<template>
  <section class="box">
    <div class="gauge-chart-box" :id="id" :style="{width: width, height: height}"></div>
  </section>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入折线图、柱状图、饼图、仪表盘组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')
require('echarts/lib/chart/gauge')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  props: [ "config", "id", "width", "height", "resize"],
  data() {
    return {
      defaultChart: null,
      gauge_chart_option: null
    }
  },
  methods: {
    draw_gauge_chart() {
      this.defaultChart.clear()
      this.defaultChart.setOption(this.gauge_chart_option)
      this.defaultChart.resize()
    }
  },
  mounted() {
    this.defaultChart = echarts.init(document.getElementById(this.id))
    this.draw_gauge_chart()
  },
  created() {
    this.gauge_chart_option = this.config
  }
}
</script>

<style scoped>
.gauge-chart-box {
  width: 260px;
  height: 240px;
}
</style>